<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>文章</title>
    <link rel="icon" href="blogyg-logo.png" type="image/x-icon"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/element-index.css">
    <link rel="stylesheet" href="css/markdown.css">
    <link rel="stylesheet" href="css/index.css">
    <style>
        [v-cloak] {
            display: none !important;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div :style="checkType?'display: flex; flex-direction: column;padding:1rem 18rem' : 'display: flex; flex-direction: column;padding:1rem 0 1rem 0 '">
        <div style="text-align: center;width: 94%; padding:3% ;background-color: white">
            <div>
                <div style="color: #2673bf; margin: 2% 1% 1% 1%;font-size: 1.5rem">
                    {{ content.name }}
                </div>
            </div>
            <div>
                <div style="color: rgba(87,87,87,0.82);font-size: 1rem;">
                    {{ content.tag }} · {{ content.auth }} · {{ content.creatTime }}
                </div>
            </div>
        </div>
        <div style="width: 94%;margin-top:1%;padding:3%;background-color: white">

            <div class="result" id="result"></div>
        </div>
    </div>
    <el-button icon="el-icon-s-home" style="
    z-index: 100;
    position: fixed;
    right: 5%;
    bottom: 6%;
    float: right;"
               @click="home()"
               circle></el-button>
    <el-button icon="el-icon-caret-left" style="
    z-index: 100;
    position: fixed;
    right: 5%;
    bottom: 12%;
    float: right;"
               @click="back()"
               circle></el-button>
</div>

</body>
<script src="js/vue@2.6.11.js"></script>
<!-- 引入组件库 -->
<script src="./js/element-index.js"></script>
<!-- md view -->
<script type="text/javascript" src="./js/showdown.min.js"></script>
<script src="./js/data.js"></script>
<script src="./js/data-photo.js"></script>
<script src="./js/util.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                tags: getTags(),
                checkType: true,
                content: {},
                screenWidth: '',
                screenHeight: '',
                changeDiv: '',
            }
        },
        computed: {
            // compiledMarkdown: function () {
            //     return marked(this.content.realContent, {sanitize: true});
            // }
        },
        methods: {
            back: function () {
                window.history.go(-1)
            },
            home: function () {
                window.location.href = './index.html'
            },
            getModel: function () {
                if ((navigator.userAgent.match(/(phone|baipad|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
                    this.checkType = false
                    console.log("iphone")
                } else {
                    this.checkType = true
                    console.log("pc")
                }
            },
        },
        created: function () {
            this.getModel()
            // 获取地址上的 id 参数
            let id = getQueryVariable('id')
            let type = getQueryVariable('type')
            let contents = []

            if (Number(type) === 1) {
                contents = getContent()
            } else {
                contents = getContentPhoto()
            }
            // 匹配文章
            for (let item of contents) {
                if (item.id === Number(id)) {
                    this.content = item
                }
            }
            // 动态设置标题
            let tagName = document.getElementsByTagName('title');
            tagName[0].text = this.content.name

            // 请求本地 markdown 文件
            let url = this.content.fileUrl
            let request = new XMLHttpRequest();
            request.open("get", url);
            request.send(null);
            request.onload = function () {
                // 回写数据到 markdown 组件中预览
                if (request.status === 200) {
                    let converter = new showdown.Converter();
                    let html = converter.makeHtml(request.responseText);
                    document.getElementById("result").innerHTML = html;

                }
            }
        },
        // 自适应屏幕
        mounted: function () {
            this.screenWidth = document.body.clientWidth
            this.screenHeight = document.body.clientHeight
            this.changeDiv = parseInt(Number(document.body.clientWidth) / 2)
            window.onresize = () => {
                return (() => {
                    this.screenWidth = document.body.clientWidth
                    this.screenHeight = document.body.clientHeight
                    // 是否展示author列
                    if (this.changeDiv >= this.screenWidth || this.screenWidth < 1000) {
                        this.checkType = false
                    } else {
                        this.checkType = true
                    }
                })();
            };
        }
    })
</script>
</html>